<template>
  <div class="goods-detail">
        <my-header titleName="商品详情"></my-header>
    <swiper :list="swipeData" style="width:100%;margin:0 auto;heigth:'300px'" dots-position="center" :auto='true' :show-desc-mask='false'></swiper>
    <div>
      <h4 class="goods-title">{{shappInfo.title}}</h4>
      <p class="goods-price"><span class="market-price">${{shappInfo.market_price}}</span><span class="sell-price">${{shappInfo.sell_price}}</span></p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品的编号:{{shappInfo.goods_no}}</p>
      <p>库存:{{shappInfo.stock_quantity}}</p>
      <p>上架时间:{{shappInfo.add_time}}</p>
    </div>
    <x-button type="primary" :link="`/goods_detail/${this.$route.params.id}/goods_desc`">图文介绍</x-button>
    <x-button type="warn" :link="`/goods_detail/${this.$route.params.id}/goodsCommon`">商品评论</x-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{amount.num}}</span>
      </div>
      <div class="goods-footer-item add" @click='addCart'><span>加入购物车</span></div>
      <div class="goods-footer-item buy" @click="jumTo('Cart')"><span>立即购买</span></div>
    </div>
  </div>
</template>
<script>
import { getCartInfo, getSwipeData } from '@/api'
import { XButton, Swiper } from 'vux'
import myHeader from './../../components/myheader'
export default {
  components: {
    XButton,
    Swiper,
    myHeader

  },
  data () {
    return {
      id: this.$route.params.id,
      demo02_index: 1,
      swipeData: [], // 轮播图数据
      shappInfo: [], // 商品详细信息
      cartInfo: [], // 上传到的购物车信息
      storage: [],
      amount: { num: 0 }
    }
  },
  created () {
    this.initData()
    //  一进来就要获取,本地存储的商品信息
    this.storage = JSON.parse(localStorage.getItem('mycart'))

    // console.log(2)
    this.nums()
    console.log(this.storage)
  },

  // computed: {
  //   totalnum () {
  //     let total = 0
  //     if (this.storage.length !== 0) {
  //       for (let i = 0; i < this.storage.length; i++) {
  //         total += this.storage[i].num
  //       };
  //     }
  //     return total
  //   }
  // },
  methods: {
    jumTo (pathName) {
      this.$router.push({ name: pathName })
    },
    initData () {
      getSwipeData(this.id).then(res => {
        res.message.map((item, index) => {
          res.message[index].url = item.src
          res.message[index].img = item.src
          this.swipeData = res.message
          console.log(this.swipeData)
        })

        // console.log(res.message)
      })
      getCartInfo(this.id).then(res => {
        // console.log(res)
        this.shappInfo = res.message[0]
        console.log(res.message)
      })
    },
    nums () {
      if (this.storage.length !== 0) {
        for (let i = 0; i < this.storage.length; i++) {
          this.amount.num += this.storage[i].num
        };
      }
      return this.amount.num
    },

    // 点击加入购物车,需判断购物车里面有没有当前该商品,有的话就传入id即可,没有就传入当前该商品的id,图片地址,价格
    addCart () {
      this.storage = JSON.parse(localStorage.getItem('mycart') || '[]')
      // 判断有无该商品
      console.log(11)
      let index = this.storage.findIndex(item => item.id === this.shappInfo.id)
      if (index !== -1) {
        this.storage[index].num += 1
        localStorage.setItem('mycart', JSON.stringify(this.storage))
        this.storage = JSON.parse(localStorage.getItem('mycart'))
        // this.nums()
        // this.num = this.storage[index].num
        // Vue.set(this.num)
        console.log(22)
        this.$set(this.amount, 'num', this.storage[index].num)
        console.log(this.amount, 'num', this.storage[index].num)
      } else if (index === -1) {
        // 没有就把当前商品的信息push
        console.log(66)
        this.storage.push({
          id: this.shappInfo.id,
          num: 1,
          img: this.swipeData[0].src,
          price: this.shappInfo.sell_price,
          title: this.shappInfo.title,
          selectState: true
        })
        console.log(this.storage)
        localStorage.setItem('mycart', JSON.stringify(this.storage))
        this.storage = JSON.parse(localStorage.getItem('mycart'))
        this.nums()
      }
    }
  }

}
</script>
<style lang="scss" >
  .goods-detail {
    margin-bottom: 50px;
    padding-top: 40px;
    .vux-swiper{
      height: 300px !important;
    }
  }

  .swiperbox {
    height: 300px;
    img {
      width: 100%;
    }
  }

  .goods-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }
  .goods-price {
    font-size: 14px;
    .market-price {
      text-decoration: line-through;
    }
    .sell-price {
      color: #e4393c;
    }
  }

  .goods-info {
    font-size: 14px;
    .goods-desc {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .goods-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
    .goods-footer-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .contact,
    .cart {
      width: 40%;
      font-size: 12px;
      position: relative;
    }
    .badge {
      position: absolute;
      top: 3%;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background-color: #e4393c;
      text-align: center;
      line-height: 14px;
      color: white;
    }
    .add,
    .buy {
      width: 60%;
      color: white;
      & > span {
        font-size: 20px;
      }
    }
    .add {
      background-color: #ff9600;
    }
    .buy {
      background-color: #e4393c;
    }
  }
  .swiper-demo-img img {
  width: 100%;
}

</style>
